<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/SM_comdEdit.css"/>
		<script type="text/javascript" src="../../js/rem.js"></script>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_854207_nc52e5giagn.css"/>
		<title></title>
		<style>
		.show{
		    display: block;
		}
		.unshow{
		    display: none;
		}
		.flex{
			display: flex;
		}
	</style>
	</head>
	<body>
		<header>
			<!--将图标设为绝对定位，方便后续添加和修改功能图标-->
			编辑
			<!--左箭头-->
			<div class="left-arrow">
				<a href="shopIndex.html"><span class=" icon-page-left iconfont"></span></a>
				
			</div>
			<!--放大镜-->
			<div class="magni unshow">
				<span class="iconfont icon-fangdajing"></span>
			</div>
			<!--完成-->
			<div class="done unshow">
				完成
			</div>
			
		</header>
		<section>
			
			<!--商品-->
			<div class="comd">
				
				<!--图片-->
				<div class="img-warp fl">
					<img id="img"/>
				</div> 
				<!--右边内容部分-->
				<div class="comdCont fl">
					<!--标题-->
					<div class="comdtitle" id="comdtitle">
					</div>
					<div class="sales">
						<span id="salesNum"></span>人正在分销 
					</div>
					
					
					
				</div> 
				<div class="clearfix"></div>
				
			</div>
			
			<!--商品信息-->
			<div class="info">
				<div class="infoCell">
					<span class="fl">规格</span>
					<span class="fr" id="stand"></span>
					<span class="clearfix"></span>
				</div>
				<div class="infoCell">
					<span class="fl">成本</span>
					<span class="fr" id="cot"></span>
					<span class="clearfix"></span>
				</div>
				<div class="infoCell">
					<span class="fl">建议售价</span>
					<span class="fr" id="sugPri"></span>
					<span class="clearfix"></span>
				</div>
				
				<form action="comdEdit.html">
					<!--价格-->
					<div class="price">
						<!--设置价格-->
						<div class="setPrice">
							<span class="fl">设置售价</span>
							<span class="fr">
								￥<input type="text" name="cost" id="cost" placeholder="99.00"/>
							</span>
							<span class="clearfix"></span>
						</div>
						<!--价格信息-->
						<div class="priceInfo">
							<div class="piCell fl">
								库存<span id="inv">150</span>件
							</div>
							<div class="piCell fr">
								利润	<span class="red">￥</span><span id="profit">45.00</span>
							</div>
						</div>
						
					</div>
					
					
				</form>
				
				
			</div>
			
		</section>
		
		<footer>
			<div class="saveBtn">保存</div>
		</footer>
		
		
		
		
		<script type="text/javascript">
			var img = document.querySelector("#img");
//			标题
			var comdtitle = document.querySelector("#comdtitle");
//			分销人数
			var salesNum = document.querySelector("#salesNum");
//			规格
			var stand = document.querySelector("#stand");
//			成本
			var cot = document.querySelector("#cot");
//			库存
			var inv = document.querySelector("#inv");
//			利润
			var profit = document.querySelector("#profit");
			
//			用ajax从后台中获取数据
			var xhr = new XMLHttpRequest();
			xhr.open("GET","https://www.easy-mock.com/mock/5bacb0a93679ca0f56b03fa5/xianYuFanSheng/comdEdit");
			xhr.send();
			
			xhr.addEventListener("readystatechange",function(){
				if(xhr.readyState==4&&xhr.status==200){
					var res = xhr.response;
//					console.log(JSON.parse(res));
					randerData(res);
					
				}
			})
			function randerData(res){
				console.log(JSON.parse(res));
				var dataObj = JSON.parse(res);
				var result = dataObj.result;
				img.setAttribute("src",result.img);
				comdtitle.innerText=result.comdtitle;
				salesNum.innerText=result.salesNum;
				stand.innerText=result.stand;
				cot.innerText=result.cot;
				inv.innerText=result.inv;
			}
			
			cost.addEventListener("blur",function(){
				if(!isNaN(cost.value)){
//					console.log(profit=cost.value-45);	
					profit.innerText=cost.value-45; 
				}
//				
				
			})
		</script>
	</body>
</html>
